<template>
  <div class="login">
    <div class="bk">
      <img src="../assets/img/loginBk1.png" alt="">
    </div>
    <div id="main">
      <img src="../assets/img/logo.png" class="logo" alt="">
      <div id="title">惊为通采购端</div>
      <el-form :model="userInfo" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <div id="inputBox">
          <el-form-item prop="userName">
            <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="userInfo.userName"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password style="margin-top: 30px"
                      v-model="userInfo.password">
            </el-input>
          </el-form-item>
          <div id="loginButton">
            <el-button type="primary" round @click="login">登录</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="loginBase">
      <span>惊为通具备：食品流通许可证、对外贸易经营者备案登记、进出口企业资质、出入境检验检疫备案</span>
      <span>惊为科技有限公司版权所有</span>
      <span>渝ICP备2020013097号</span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                userInfo: {
                    userName: "",
                    password: "",
                },
                rules: {
                    userName: [
                        {required: true, message: "请输入用户名", trigger: "blur"},

                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "blur"},

                    ]
                },
            };
        },
        created() {
            let that = this;
            localStorage.clear()
            document.onkeydown = function (e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    that.login();
                }
            }
        },
        methods: {
            login() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$HttpPost("/index.php?s=/admin/passport/login", {
                            user_name: this.userInfo.userName,
                            password: this.userInfo.password
                        }).then(res => {
                            if(res.code!=0){
                                return false
                            }
                            window.localStorage.setItem("token", res.data.token);
                            window.localStorage.setItem("userInfo", JSON.stringify(res.data));
                            this.$HttpGet("/index.php?s=/admin/index/details").then(res => {
                                if (res.code == 0) {
                                    console.log("登录啦", res)
                                    if (res.data.trade_type == undefined) {
                                        res.data.trade_type = ""
                                    }
                                    // res.data.trade_type = ""
                                    if (res.data.trade_type == "") {
                                        this.$notifyError("该商户无贸易类型");
                                        return false
                                    }
                                    window.localStorage.setItem("arrTradeType", res.data.trade_type);
                                    this.$router.push("/index/commodity/home?type_name=0");
                                }


                            }).catch((e)=>{
                                console.log("捕捉1",e)
                            })

                        }).catch((e)=>{
                            console.log("捕捉",e)
                        })
                    }
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
  .login {
    position: relative;
    background: #FFFFFF;
    height: 100vh;
    
    .bk {
      width: 100%;
      height: 747px;
      background: #bcccf6;
      position: relative;
      
      img {
        width: 629px;
        height: 509px;
        position: absolute;
        left: 30%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    
    .loginBase {
      height: calc(100vh - 747px);
      padding-top: 40px;
      box-sizing: border-box;
      text-align: center;
      color: #333333;
      font-size: 12px;
      
      span {
        margin-right: 20px;
      }
    }
  }
  
  #main {
    position: absolute;
    width: 370px;
    height: 410px;
    right: 30%;
    top: 167px;
    transform: translateX(50%);
    border-radius: 10px;
    background: #FFFFFF;
    
    .logo {
      width: 115px;
      height: 114px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    /deep/ .el-input__icon {
      font-size: 16px;
      margin-top: 3px;
    }
  }
  
  #title {
    position: relative;
    width: 100%;
    text-align: center;
    top: 77px;
    height: 26px;
    font-size: 25px;
    font-weight: bold;
    line-height: 26px;
    color: #3A61CA;
  }
  
  #inputBox {
    position: relative;
    width: 304px;
    height: 130px;
    top: 125px;
    
    margin: 0 auto;
  }
  
  #loginButton {
    position: relative;
    width: 304px;
    height: 44px;
    top: 55px;
  }
  
  .el-button--primary {
    color: #fff;
    background-color: #3A61CA;
    border-color: #3A61CA;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
  
  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #fbfbfb;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #5381a9;
    display: inline-block;
    font-size: inherit;
    height: 44px;
    line-height: 50px;
    outline: 0;
    padding: 0 30px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 304px;
    border-radius: 25px;
  }
  
  .el-form-item {
    margin-bottom: 0;
  }
  
  .el-form-item__error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 11px;
  }
  
  .el-input__prefix {
    left: 15px;
    transition: all .3s;
  }
  
  .el-input--prefix .el-input__inner {
    padding-left: 40px;
  }
</style>
